<template>
  <Menus>
    <template v-slot:routeF> 商品管理 </template>
    <template v-slot:routeS> 商品编辑 </template>
    <div class="box">
      <el-form :model="form" :rules="rules" label-width="120px">
        <el-form-item label="商品编码" prop="id">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-form-item v-model="form.type" placeholder="填写商品类型">
            <el-col :span="36">
              <el-input v-model="form.type" />
            </el-col>
          </el-form-item>
        </el-form-item>
        <el-form-item label="商家" prop="shopName">
          <el-input v-model="form.shopName" />
        </el-form-item>
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="现价" prop="price">
              <el-input v-model="form.price" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
            <el-form-item label="原价" prop="oldPrice">
              <el-input v-model="form.oldPrice" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="修改时间">
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="年/月/日"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="form.date2"
              placeholder="准确时间"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="商品简介">
          <el-input v-model="form.title" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>

      <div class="imgUpload">
        <header>商品图片</header>
        <hr />
        <el-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
    </div>
  </Menus>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import ajax from "../../apis/ajax";
import { useRoute } from "vue-router";

const query = useRoute().query;
const idEdit = !!query.id;
const initObj = {
  id: "",
  type: "",
  price: "",
  oldPrice: "",
  shopName: "",
  title: "",
};

const form = reactive(JSON.parse(JSON.stringify(initObj)));

const rules = reactive({
  id: [
    { required: true, message: "必须输入商品编码", trigger: "blur" },
    { min: 4, max: 20, message: "商品编码长度在4到20之间", trigger: "blur" }
  ],
  type: [
    { required: true, message: "必须输入商品类型", trigger: "blur" },
    { min: 2, max: 20, message: "商品类型长度在2到20之间", trigger: "blur" }
  ],
  price: [
    { required: true, message: "必须输入现价", trigger: "blur" }
  ],
  shopName: [
    { required: true, message: "必须输入出口商", trigger: "blur" }
  ],

});

onMounted(function(){
  if (idEdit) {
        ajax({
            url: '/goods/' + query.id,
            method: 'get'
        }).then(({ data }) => {
          console.log(data)
          console.log(form)
            for (let n in data.data) {
                form[n] = data.data[n]
            }
        })
    } 
})

function onSubmit(){
  
}
</script>

<style lang="less">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  .el-form {
    width: 1000px;
    height: 400px;
    border-radius: 10px;
    background: #fff;
    padding: 20px;
  }
  .imgUpload {
    width: 1000px;
    height: 250px;
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
    padding: 20px;
  }
}
</style>